<template>
  <div>
    <!-- table:表格对应的数据 -->
    <!-- row-key="id":表格选择的依据,通过id选择,必填项 -->
    <!-- default-expand-all:自动展开数据 -->
    <!-- tree-props:属性数据的属性 -->
    <!-- 1.引入表格和创建依赖数据 -->
    <!-- 4.改变表格对应的字段值 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="uid" label="ID"> </el-table-column>
      <el-table-column prop="nickname" label="昵称" sortable> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="addtime" label="注册日期" sortable>
        <template slot-scope="scope">
          {{ Number(scope.row.addtime) | fomatetime }}
        </template>
      </el-table-column>
      <!-- 6.对需要操作的元素添加点击事件，判断的值可以使用插槽中的id,主要是根据接口需要的值 -->
      <!--  <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
/* 2. 导入请求接口 */
/* 2. 菜单列表数据接口、删除菜单接口 */
import { getMemberList } from "../../api.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  /* 3.第一时间获取请求的数据进行赋值渲染 */
  created() {
    /* 3.1优化结构，调用methods中的函数进行请求 */
    this.getMenu();
  },
  /* 3.2 在methods中创建async函数进行请求，在钩子函数中调用*/
  methods: {
    async getMenu() {
      let res = await getMemberList();
      // console.log(res);
      /* 3.3 将响应的结果赋值给组件依赖的值 */
      this.tableData = res.list;
    },

    /* 8.编辑功能 */
    /* list子->index父元素->info子元素 */
    edit(info) {
      /* 8.1让修改弹窗显示，通过子传父方法改变父元素中的值,info是该节点的所有值 */
      /* 8.3 子元素通过this.$emit的方法修改父元素的值，('方法名',要传递的变量) */
      this.$emit("edit", info);
    },
  },
};
</script>

<style>
</style>